<template>
	<view>
		<view class="container u-skeleton">
			<Back />
			<view class="header"></view>
			<view class="search fonts u-skeleton-fillet" @tap="focus">
				<u-search placeholder="搜索你想要的内容" v-model="keyword" bg-color="white" height="80" :show-action="false" :disabled="true"></u-search>
			</view>
			<view class="header-title u-skeleton-rect">{{recommendable?'智慧课程':'亲子社交'}}</view>
			<view v-for="(item, index) in courseListData" :key="index">
				<view class="column-long fonts  u-skeleton-fillet" @tap="columeTap(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
					<view class="image"><ImageLoad :src="item.coverUrl" /></view>
					<view class="content">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			courseListData: [{}, {}, {}, {}],
			loading: true,
			keyword: '',
			recommendable: false
		}
	},
	onLoad(option) {
		this.recommendable = option.recommendable==='true'
		this.loadData()
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/topic/topic' ,
			imageUrl: ''
		}
	},
	methods: {
		/**
		 * 获取数据
		 */
		loadData: async function() {
			//用户deviceUuid没有获取则轮训获取 直到获取成功
			if (!this.deviceUuid) {
				const timer = setTimeout(() => {
					this.loadData()
				}, 300)
				this.$once('hook:beforeDestory', function() {
					clearTimeout(timer)
				})
				return
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadCourseListData, { deviceUuid: this.deviceUuid, recommendable: this.recommendable }))
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				const timer2 = setTimeout(() => {
					this.loadData()
				}, 1000)
				this.$once('hook:beforeDestory', function() {
					clearInterval(timer2)
				})
				return
			}
			this.courseListData = data.courses
			uni.hideLoading()
			//隐藏骨架屏
			this.loading = false
		},
		/**
		 *	点击进入课程详情
		 */
		columeTap: function(items) {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(items) } })
		},
		focus: function() {
			this.$Router.push({ name: 'search', query: { type: 'course', recommendable: this.recommendable } })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white
	padding-bottom 80rpx
	.header
		width 750rpx
		height 320rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute
	.search
		z-index 1
		width 670rpx
		margin 190rpx auto 50rpx auto
		filter drop-shadow(2rpx 2rpx 5rpx #c4c4c4)
	.header-title
		font-size 50rpx
		margin 20rpx 0 0 40rpx
		position relative
		width 670rpx
		z-index 1
		font-weight bold
	.column-long
		width 670rpx
		height 400rpx
		border-radius 30rpx
		overflow hidden
		transform translate3d(0, 0, 0)
		box-shadow 0 0 50rpx #909399
		transition all 0.3s
		font-size 35rpx
		position relative
		margin 40rpx auto 0 auto
		.image
			height 320rpx
		.content
			width 100%
			height 80rpx
			display flex
			align-items center
			justify-content space-between
			color #7B2300
			padding 0 30rpx
			box-sizing border-box
</style>
